<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-25 08:44:44
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-25 19:32:40
 * @Description  : 
-->
<template>
	<view class="page">
		<view class="bannerArea">
			<uv-navbar
				bgColor="transparent"
				:fixed="true"
				titleStyle="color:#fff"
				:placeholder="true"
				@leftClick="$onClickLeft"
				leftIconColor="#fff"
				title="充值"></uv-navbar>
			<view class="innerBannerArea">
				<view class="swiperAdsClass">
					<view class="leftArea">
						<view class="balance">当前余额（元）</view>
						<view class="money">{{currentMonry}}</view>
					</view>
					<view class="rightArea">
						<!-- <uv-button :custom-style="customStyle" color="#fff">充值记录</uv-button> -->
					</view>
				</view>
			</view>
		</view>
		<view class="mainContent">
			<view class="innerContent">
				<view class="input-label">充值金额</view>
				<!-- <view class="input-box">
					<view class="unit">￥</view>
					<uv-input
						v-model="recharge_money"
						type="digit"
						placeholder="请输入充值金额"
						border="none" />
				</view> -->
				<view class="discount">
					<view
						class="discountItem"
						:key="index"
						v-for="(item, index) in rechargePageList"
						@click="setActive(item)"
						:class="{ discountItemActive: currentSelect == item.id }">
						<view class="discountItemLeft">
							充{{ item.sellPrice }}送{{ item.value - item.sellPrice }}元
						</view>
						<view class="discountItemPrice">{{ item.sellPrice }}元</view>
					</view>
				</view>
				<button class="confirmClass" @click="sendMsg">确认充值</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { rechargePage, createRechargeOrderPay } from '@/api/goods'
	import { ref, onMounted } from 'vue'
	import { userGetUserInfo } from '@/api/user'
	const recharge_money = ref()
	const currentSelect = ref()
	const currentSelectMoney = ref()
	const rechargePageList = ref([])
	const customStyle = ref({
		height: '60rpx',
		background: 'transparent',
		border: '1rpx solid #fff',
		color: '#fff',
		borderRadius: '40rpx', //圆角
	})
	const currentMonry = ref()
	const setActive = item => {
		if (item.id == currentSelect.value) {
			currentSelect.value = ''
			currentSelectMoney.value = ''
		} else {
			currentSelect.value = item.id
			currentSelectMoney.value = item.sellPrice
		}
	}
	const getUserInfo = async () => {
		let data = await userGetUserInfo()
		if (data) {
			currentMonry.value = data.nowMoney
		}
	}
	const sendMsg = async () => {
		console.log(currentSelect.value)
		if (!currentSelect.value) {
			uni.showToast({
				title: '请选择充值金额',
				icon: 'none',
				duration: 2000,
			})
			return
		}
		const res = await createRechargeOrderPay({
			id: currentSelect.value,
			paytype: 'weixin',
			orderType: 'rechargeamount',
			msg: '充值金额',
		})
		uni.showToast({
			title: '充值成功',
			icon: 'none',
			duration: 2000,
		})
		getUserInfo()
		console.log(currentSelect.value)
	}
	onMounted(() => {
		getUserInfo()
		rechargePage({
			pageNo: 1,
			pagesize: 9999,
		}).then(res => {
			console.log(res)
			rechargePageList.value = res.list
		})
	})
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-color: #f6f6f6;
	}
	.bannerArea {
		display: flex;
		flex-direction: column;
		background-color: $qingzhen-btn-primary-color;
		height: 380rpx;
		width: 100%;
		border-radius: 0 0 30rpx 30rpx;
		.innerBannerArea {
			color: #fff;
			padding: 10rpx 40rpx;
			flex: 1;
			width: 100%;
			.swiperAdsClass {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.money {
				margin-top: 20rpx;
				font-size: 60rpx;
			}
		}
	}
	.mainContent {
		padding: 20rpx;
		margin-top: -70rpx;
		.innerContent {
			width: 100%;
			border-radius: 14rpx;
			background-color: #fff;
			padding: 20rpx;
			.input-label {
				font-size: 30rpx;
				font-weight: 500;
				color: #333;
			}
			.input-box {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #ddd;
				.unit {
					display: flex;
					align-items: center;
					font-size: 48rpx;
					font-weight: 500;
				}
				.uv-input {
				}
			}
			.discount {
				margin: 30rpx 0;
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				.discountItem {
					background-color: #d3ece2;
					border-radius: 10rpx;
					width: 30%;
					height: 144rpx;
					border: 1px solid $qingzhen-btn-primary-color;
					border-radius: 10rpx;
					position: relative;
					z-index: 1;
					margin-bottom: 20rpx;
					margin-right: 5%;
					display: flex;
					justify-content: center;
					align-items: center;
					&:nth-child(3n) {
						margin-right: 0;
					}
					.discountItemLeft {
						position: absolute;
						left: 0;
						top: 0;
						height: 40rpx;
						line-height: 40rpx;
						background: $qingzhen-btn-primary-color;
						opacity: 0.8;
						border-radius: 10rpx 0 20rpx 0;
						top: 0;
						left: -2rpx;
						padding: 0 16rpx;
						font-size: 20rpx;
						color: #ffffff;
						font-family: OPPOSANS;
					}
					.discountItemPrice {
						color: $qingzhen-btn-primary-color;
					}
					.discountItemPrice_active {
						background: $qingzhen-btn-primary-color;
						color: #fff;
					}
				}
				.discountItemActive {
					background: $qingzhen-btn-primary-color;
					.discountItemLeft {
						background: #fff;
						color: $qingzhen-btn-primary-color;
					}
					.discountItemPrice {
						color: #fff;
					}
				}
			}
			.confirmClass {
				border-radius: 50rpx;
				background: linear-gradient(90deg, $qingzhen-btn-primary-color, #d3ece2) !important;
				color: #fff !important;
				font-size: 32rpx !important;
				font-weight: 500 !important;
				padding: 2rpx 0;
				box-shadow: 0 4rpx 12rpx rgba(211, 236, 226, 0.6);
			}
		}
	}
</style>
